<template>
  <div>

    <n-drawer v-model:show="showModal" :width="dialogWidth">
      <n-drawer-content closable :header-style="{
                    padding: '20px',
                  }" :body-content-style="{
                    padding: '20px',
                  }" :footer-style="{
                    padding: '12px 20px',
                  }">
        <template #header>
          <div style="font-weight: 500;font-size: 18px;color: #3D3D3D;line-height: 25px;">房型编辑</div>
        </template>
        <template #footer>
          <n-button @click="closeForm" style="width: 70px;height: 35px;margin-right: 10px">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm" style="width: 70px;height: 35px;">
            保存
          </n-button>
        </template>
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            label-placement="top"
            label-width="auto"
          >
            <div class="level-detail-div">
              <div class="level-detail-div-title">
                <div></div>
                房型展示图
              </div>
              <n-grid :cols="1">
                <n-gi>
                  <n-form-item label="封面图" path="cover">
                    <FileChooser1 :maxNumber="1" v-model:value="formValue.cover" fileType="default" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="图集" path="coverList">
                    <FileChooser1 :maxNumber="10" v-model:value="formValue.coverList" fileType="default" />
                  </n-form-item>
                </n-gi>
              </n-grid>
            </div>
            <div class="level-detail-div">
              <div class="level-detail-div-title">
                <div></div>
                房型名称
              </div>
              <n-grid :cols="2" x-gap="10">
                <n-gi>
                  <n-form-item label="房型名称_简体中文" path="name_zh">
                    <n-input placeholder="简体中文房型名称" v-model:value="nameLanguage.zh" style="width: 100%" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="房型名称_日本语" path="name_ja">
                    <n-input placeholder="日本语房型名称" v-model:value="nameLanguage.ja" style="width: 100%" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="房型名称_English" path="name_en">
                    <n-input placeholder="英语房型名称" v-model:value="nameLanguage.en" style="width: 100%" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="房型名称_한국어" path="name_ko">
                    <n-input placeholder="韩语房型名称" v-model:value="nameLanguage.ko" style="width: 100%" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="房型名称_繁体中文" path="name_zh_CN">
                    <n-input placeholder="繁体中文房型名称" v-model:value="nameLanguage.zh_CN" style="width: 100%" />
                  </n-form-item>
                </n-gi>
              </n-grid>
            </div>
            <div class="level-detail-div">
              <div class="level-detail-div-title">
                <div></div>
                房型参数
              </div>
              <n-grid :cols="2" x-gap="10">
                <n-gi>
                  <n-form-item label="房型间数（单位：间）" path="bedrooms">
                    <n-input-number placeholder="请输入间数" v-model:value="formValue.bedrooms" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="最大容纳人数（单位：人）" path="occupancy">
                    <n-input-number placeholder="请输入占用" v-model:value="formValue.occupancy" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item path="checkinAt">
                    <template #label>
                      <span class="n-form-item-label__text">入住时间</span><span class="n-form-item-label__asterisk">*</span><span class="n-form-item-label__text">（GMT 9+）</span>
                    </template>
                    <n-time-picker format="HH:mm" v-model:formatted-value="formValue.checkinAt" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item path="checkoutAt">
                    <template #label>
                      <span class="n-form-item-label__text">退房时间</span><span class="n-form-item-label__asterisk">*</span><span class="n-form-item-label__text">（GMT 9+）</span>
                    </template>
                    <n-time-picker format="HH:mm" v-model:formatted-value="formValue.checkoutAt" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="房型面积（单位：m²）" path="size">
                    <n-input placeholder="请输入面积" v-model:value="formValue.size" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="最低价格（单位：JPY）" path="basePrice">
                    <n-input-number placeholder="请输入最低价格" v-model:value="formValue.basePrice" style="width: 100%"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <div style="width: 100%;display: flex;justify-content: space-between">
                    <div>
                      <n-form-item label="价格人数（单位：人）" path="occupantsForBaseRate" :show-feedback="false">
                        <n-input-number placeholder="请输入人数" v-model:value="formValue.occupantsForBaseRate" style="width: 120px" :precision="0" />
                      </n-form-item>
                    </div>
                    <div>
                      <n-form-item label="超员增加费用" path="appversion" :show-feedback="false">
                        <a-radio-group v-model:value="isAddFee" name="isAddFee" >
                          <a-radio value="1">增加</a-radio>
                          <a-radio value="2" style="margin-right: 0">不增加</a-radio>
                        </a-radio-group>
                      </n-form-item>
                    </div>
                  </div>
                </n-gi>
                <n-gi>
                  <n-form-item label="超员费用（单位：JPY）" path="additionalGuestAmounts" v-if="isAddFee == '1'" :show-feedback="false">
                    <n-input-number placeholder="请输入超员费用" v-model:value="formValue.additionalGuestAmounts" style="width: 100%;"/>
                  </n-form-item>
                </n-gi>
                <n-gi span="2">
                  <div class="tips">*价格人数：指的是房价包含的人数，如开启超员增加费用，超过此人数需设置额外加收费用，不开启则不按人数增加费用</div>
                </n-gi>
              </n-grid>
            </div>
            <div class="level-detail-div">
              <div class="level-detail-div-title">
                <div></div>
                床型
              </div>
              <div class="room-type-list" :key="index" v-for="(item, index) in bedList">
                <n-grid :cols="2" x-gap="10">
                  <n-gi>
                    <div class="room-type-list-label">床型名称</div>
                    <n-input placeholder="请输入床型名称" v-model:value="item.bedTypeName" style="width: 100%"/>
                  </n-gi>
                  <n-gi>
                    <div class="room-type-list-item">
                      <div class="room-type-list-item1">
                        <div class="room-type-list-label">床宽（单位：米）</div>
                        <n-input placeholder="请输入床宽" v-model:value="item.bedWidth" style="width: 100%"/>
                      </div>
                      <div class="room-type-list-item2">
                        <div class="room-type-list-label">数量（单位：个）</div>
                        <n-input placeholder="请输入数量" v-model:value="item.bedNum" style="width: 100%"/>
                      </div>
                      <n-button
                        text
                        :style="buttonCSS"
                        @click="handleDelBed(index)"
                      >
                        <n-icon size="18">
                          <TrashOutline />
                        </n-icon>
                      </n-button>
                    </div>
                  </n-gi>
                </n-grid>
              </div>
              <n-button type="primary"  @click="handleAddBed">
                <template #icon>
                  <n-icon>
                    <AddCircleOutline />
                  </n-icon>
                </template>
                添加
              </n-button>
            </div>
          </n-form>
        </n-spin>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
import {ref, computed, reactive} from 'vue';
  import { Edit, View } from '@/api/pmsRoomType';
  import { State, newState, rules } from './model';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
import {NButton, NIcon, useMessage} from 'naive-ui';
  import { adaModalWidth } from '@/utils/hotgo';
  import { MinusCircleOutlined, PlusCircleOutlined } from '@vicons/antd';
import {jsontoobj} from "@/utils/smjcomm";
import {TrashOutline, AddCircleOutline} from "@vicons/ionicons5";

  const emit = defineEmits(['reloadTable']);
  const message = useMessage();
  const settingStore = useProjectSettingStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref<State>(newState(null));
  const formRef = ref<any>({});
  const formBtnLoading = ref(false);
  const isAddFee = ref('1')
const bedList = ref([
    {
      bedTypeName: '',
      bedWidth: null,
      bedNum: null
    }
  ])
  const dialogWidth = computed(() => {
    return adaModalWidth(650);
  });
  const nameLanguage = ref({
    en: '',
    zh: '',
    ja: '',
    ko: '',
    zh_CN: '',
  });

const buttonCSS = computed(() => {
  return {
    '--n-text-color': 'rgb(61, 61, 61)',
    '--n-text-color-hover': 'rgb(61, 61, 61)',
    '--n-text-color-pressed': 'rgb(61, 61, 61)',
    '--n-text-color-focus': 'rgb(61, 61, 61)',
    'margin-top': '40px'
  }
})

  function openModal(state: State) {
    showModal.value = true;

    // 新增
    if (!state || state.id < 1) {
      formValue.value = newState(state);

      return;
    }

    // 编辑
    loading.value = true;
    View({ id: state.id })
      .then((res) => {
        res.bedrooms = parseInt(res.bedrooms)
        if(res.bedTypes){
          bedList.value = res.bedTypes
        }else{
          bedList.value = [
            {
              bedTypeName: '',
              bedWidth: null,
              bedNum: null
            }
          ]
        }

        if(res.additionalGuestAmounts > 0){
          isAddFee.value = "1"
        }else{
          isAddFee.value = "2"
        }

        console.log('isAddFee',isAddFee.value)

        res.bedrooms = res.bedrooms ? res.bedrooms : ''

        res.checkinAt = res.checkinAt ? res.checkinAt : '00:00';
        res.checkoutAt = res.checkoutAt ? res.checkoutAt : '00:00';

        formValue.value = res;

        if(res.nameLanguage){
          res.nameLanguage = jsontoobj(res.nameLanguage);
          nameLanguage.value.zh = res.nameLanguage.zh && res.nameLanguage.zh.content ? res.nameLanguage.zh.content : ''
          nameLanguage.value.en = res.nameLanguage.en && res.nameLanguage.en.content ? res.nameLanguage.en.content : ''
          nameLanguage.value.ko = res.nameLanguage.ko && res.nameLanguage.ko.content ? res.nameLanguage.ko.content : ''
          nameLanguage.value.ja = res.nameLanguage.ja && res.nameLanguage.ja.content ? res.nameLanguage.ja.content : ''
          if(res.nameLanguage.zh_CN){
            nameLanguage.value.zh_CN = res.nameLanguage.zh_CN.content ? res.nameLanguage.zh_CN.content : ''
          }else if(res.nameLanguage.zh_cn){
            nameLanguage.value.zh_CN = res.nameLanguage.zh_cn.content ? res.nameLanguage.zh_cn.content : ''
          }else{
            nameLanguage.value.zh_CN = ''
          }
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function confirmForm(e) {
    // console.log('bedList', bedList)
    formValue.value.bedType = bedList.value
    // console.log('formValue.value', formValue.value)
    // return
    formValue.value.nameLanguage = nameLanguage.value

    if(isAddFee.value == "2"){
      formValue.value.additionalGuestAmounts = 0;
    }

    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {

        Edit(formValue.value).then((_res) => {
          message.success('操作成功');
          setTimeout(() => {
            formBtnLoading.value = false;
            closeForm();
            emit('reloadTable');
          });
        }).catch((err) => {
          formBtnLoading.value = false;
        });
      } else {
        message.error('请填写完整信息');
        formBtnLoading.value = false;
      }
    });
  }

  function closeForm() {
    showModal.value = false;
    loading.value = false;
    bedList.value = [
      {
        bedTypeName: '',
        bedWidth: null,
        bedNum: null
      }
    ]
  }

  function handleAddBed(){
    let item = {
      bedTypeName: '',
      bedWidth: null,
      bedNum: null
    }
    bedList.value.push(item)
  }

  function handleDelBed(index){
    bedList.value.splice(index,1)
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less">
.level-detail-div{
  &-title{
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #3D3D3D;
    line-height: 22px;
    margin-bottom: 15px;
    div{
      margin-right: 5px;
      width: 6px;
      height: 15px;
      background: #053DC8;
    }
  }
  &-item{
    &-title{
      font-weight: 400;
      font-size: 14px;
      color: #3D3D3D;
      line-height: 20px;
      margin-bottom: 8px;
    }
    &-content{

    }
  }
}
.tips{
  font-weight: 400;
  font-size: 14px;
  color: #F73314;
  line-height: 20px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.room-type-list{
  margin-bottom: 20px;
  .room-type-list-label{
    padding: 0 0 6px 2px;
    font-size: 14px;
    line-height: 26px;
  }
  .room-type-list-item{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .room-type-list-item1{
      flex: 1;
      margin-right: 10px;
    }
    .room-type-list-item2{
      flex: 1;
      margin-right: 10px;
    }
  }
}
</style>


